<template>
  <div class="analyse">
    <CountPanel />
    <div class="line"></div>
    <SearchPanel @search="search" />
    <c-row :gutter="16">
      <c-col :span="16" class="section-part">
        <Card title="预警趋势">
          <div class="pieContainer">
            <ChartLine :data="lineData" />
          </div>
        </Card>
      </c-col>
      <c-col :span="8" class="section-part">
        <Card title="总体指标">
          <div class="pieContainer">
            <chartPie
              v-if="barsourceData?.length"
              :extendOption="extendOption"
              :data="barsourceData"
            />
            <c-empty v-else></c-empty>
          </div>
        </Card>
      </c-col>
      <c-col :span="16" class="section-part">
        <Card title="区域统计">
          <CpHistogram
            v-if="sceneDistributionData?.length"
            :data="sceneDistributionData"
          />
          <c-empty v-else></c-empty>
        </Card>
      </c-col>
      <c-col :span="8" class="section-part">
        <Card :title="title">
          <div class="pieContainer">
            <Pie v-if="PieData?.length" style="height: 100%" ref="forecast" />
            <c-empty v-else></c-empty>
          </div>
        </Card>
      </c-col>
    </c-row>
  </div>
</template>

<script>
// MODEL_TYPE
import { getWarningAnalysis } from '@/api/analyse.js'
import CountPanel from './components/CountPanel.vue'
import SearchPanel from './components/SearchPanel.vue'
import Card from './components/Cards'
import CpHistogram from '@/component/CpHistogram'
import chartPie from '@/component/chartPie'
import ChartLine from '@/component/ChartLine'
import { Pie } from '@/component/Charts'
import { color } from '@/utils'
export default {
  name: 'analyse',
  components: {
    CountPanel,
    SearchPanel,
    Card,
    CpHistogram,
    Pie,
    ChartLine,
    chartPie
  },
  data() {
    return {
      color,
      lineData: [], // 预警趋势
      barsourceData: [], // 总体指标
      sceneDistributionData: [], // 事项场景分布
      forecastData: [
        { value: 1048, name: '23' },
        { value: 735, name: '2' },
        { value: 580, name: '3' },
        { value: 484, name: 'Union' },
        { value: 300, name: 'Video' }
      ],
      probabilityData: [],
      PieData: [],
      tableFlag: ''
    }
  },
  computed: {
    extendOption() {
      return {
        topTitle: this.PieData.reduce(
          (sum, e) => sum + Number(e.value || 0),
          0
        ),
        botValue: '总预警'
      }
    },
    title() {
      return this.tableFlag === 'probabilityDistribution'
        ? '概率分布'
        : '预测结果'
    }
  },
  methods: {
    search(params) {
      getWarningAnalysis(params).then(({ data }) => {
        this.tableFlag = data?.tableFlag
        this.sceneDistributionData = data?.areaAnalysis?.map((el) => {
          el.x = el.name
          el.y = el.warningCount
          return el
        })
        this.lineData = data?.warningTrend?.map((el) => {
          el.x = el.name
          el.y = el.warningCount
          return el
        })
        this.barsourceData = data?.allTarget?.map((el) => {
          el.value = el.warningCount
          el.unit = ''
          return el
        })
        this.forecastData = data?.forecastResultVo?.map((el) => {
          el.value = el.warningCount
          el.unit = ''
          return el
        })
        this.probabilityData = data?.probabilityDistribution?.map((el) => {
          el.value = el.warningCount
          el.unit = ''
          return el
        })
        this.PieData =
          (this.tableFlag === 'probabilityDistribution'
            ? this.probabilityData
            : this.forecastData) || []
        const option = {
          label: {
            formatter: ({ name, percent, data }) => {
              return `${name}:${data.value}\n (${percent}%)`
            }
          },
          color: color,
          legend: {
            orient: 'vertical',
            left: 'left',
            top: 0
          },
          grid: {
            left: 20,
            right: 30,
            bottom: 30,
            top: 30,
            containLabel: true
          },
          tooltip: {
            trigger: 'item',
            formatter: ({ name, percent, data }) => {
              return `${name}:${data.value}`
            }
          },
          dataset: {
            source: this.PieData
          }
        }
        this.$nextTick(() => {
          if (this.PieData?.length) {
            this.$refs.forecast.setOption(option)
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.analyse {
  height: 100%;
  overflow: auto;
}
.line {
  margin: 16px 0;
  border: 1px dashed #e6e6e6;
}
.section-part {
  position: relative;

  & {
    margin-bottom: 16px;
  }
}
.pieContainer {
  position: relative;
  height: 280px;
}
</style>